<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>

        <th:block th:include="include :: header" />
        <script th:src="@{/assets/js/utils/api.js}"></script>
        <script th:inline="javascript">
            ctxPath = /*[[@{/}]]*/ ''
            var api = getApi(ctxPath)
            //数据字典
            var dicMap = {};

            /**
             * 数得数据字典文本
             * @param code
             */
            function getDicText(code, fun) {
                $.ajax({
                    type: "post",
                    url: ctxPath + 'sys/dic/dicList/' + code,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        fun(data);
                    }
                });
            }

            /**
             * 缓数数据字典
             * @param value
             * @param rowData
             */
            function cacheDic(value, code) {
                if (dicMap[code] == undefined) {
                    getDicText(code, function (data) {
                        let info = data.info
                        if ((typeof info == 'object') && info.constructor == Array) {
                            var obj = {};
                            $(info).each(function (i, item) {
                                if (item.dataCode != "!") {
                                    obj[item.dataCode] = item.dataName;
                                }
                            });
                            dicMap[code] = obj;
                        }
                    });
                }
                if (dicMap[code][value] == undefined) {
                    return "";
                }
                return dicMap[code][value];
            }

            /**
             * 格式化数据字典
             * @param value
             * @param rowData
             * @param rowIndex
             */
            function formartDic(value, code) {
                return cacheDic(value, code);
            }
        </script>
    </head>

    <body class="gray-bg top-navigation full-height-layout" style="overflow:hidden">
        <div id="wrapper">
            <div style="height:100%;padding: 0 15px;position: inherit;" class="gray-bg dashbard-1">
                <!--菜单开始-->
                <div class="row border-bottom white-bg">
                    <nav class="navbar navbar-static-top" role="navigation">
                        <div class="navbar-header">
                            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                                <i class="fa fa-reorder"></i>
                            </button>
                            <a href="#" class="navbar-brand"> XGG 管理系统 </a>
                        </div>
                        <div class="navbar-collapse collapse" id="navbar">
                            <ul class="nav navbar-nav" >
                                <li class="active">
                                    <!--<a aria-expanded="false" role="button" href="/admin/main.do"> 返回首页</a>-->
                                </li>
                                <li th:id="${menu_1.id}" class="dropdown" th:each="menu_1 : ${menuList}" onmouseout="closeDropDown(this.id)" onmouseover="openDropDown(this.id)" style="background-color:rgba(166,163,163,0.04);margin-left:1px;">
                                    <!--一级菜单标题-->
                                    <a th:if="${menu_1.type} == 100301" aria-expanded="false" role="button" href="#"
                                       class="dropdown-toggle" data-toggle="dropdown">
                                        <i th:class="|fa ${menu_1.icon}|"></i>&nbsp;[[${menu_1.name}]]<span class="caret"></span>
                                    </a>
                                    <!--一级菜单选项-->
                                    <ul class="dropdown-menu" role="menu">
                                        <li th:each="menu_2:${menu_1.list}">
                                            <!--二级菜单标题-->
                                            <a th:if="${menu_2.type}==100301" href="#">
                                                <i th:class="|fa ${menu_2.icon}|"></i>[[${menu_2.name}]]<span class="fa fa-angle-right"></span>
                                            </a>
                                            <!--二级菜单选项-->
                                            <ul th:if="${menu_2.type}==100301" role="menu" class="dropdown-menu">
                                                <li th:each="menu_3:${menu_2.list}">
                                                    <a th:onclick="n(this,[[@{${menu_3.url}}]]);">
                                                        <i th:class="|fa ${menu_3.icon}|"></i>[[${menu_3.name}]]123
                                                    </a>
                                                </li>
                                            </ul>
                                            <!--二级按钮-->
                                            <a th:if="${menu_2.type}==100302" th:onclick="n(this,[[@{${menu_2.url}}]]);">
                                                <i th:class="|fa ${menu_2.icon}|"></i>[[${menu_2.name}]]
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="nav navbar-top-links navbar-right" >
                                <li>
                                    <a onclick="doLogout()" style="color:#aa2116" >
                                        <i class="fa fa-sign-out"></i>【[[${userName}]]】退出
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <!--菜单结束-->

                <!-- 选项卡部分开始 -->
                <div class="row content-tabs">
                    <button class="roll-nav roll-left J_tabLeft">
                        <i class="fa fa-backward"></i>
                    </button>
                    <nav class="page-tabs J_menuTabs">
                        <div class="page-tabs-content">
                            <a href="javascript:;" class="active J_menuTab" data-id="sy">首页</a>
                        </div>
                    </nav>
                    <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i></button>
                    <div class="btn-group roll-nav roll-right">
                        <button class="dropdown" data-toggle="dropdown">页签操作<span class="caret"></span></button>
                        <ul role="menu" class="dropdown-menu dropdown-menu-right">
                            <li class="tabCloseCurrent"><a>关闭当前</a></li>
                            <li class="J_tabCloseOther"><a>关闭其他</a></li>
                            <li class="J_tabCloseAll"><a>全部关闭</a></li>
                        </ul>
                    </div>
                    <!--<div class="btn-group roll-nav roll-right" style="width: 110px;">
                        <button class="dropdown J_tabClose" data-toggle="dropdown"
                                style="width: 110px;background-color: #1ab394;color: #fff;">
                            [[${userName}]]<span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu dropdown-menu-right">
                            <li class="J_tabShowActive"><a href="JavaScript:void(0)" onclick="openWindow()">修改密码</a>
                            </li>
                            <li class="divider"></li>
                            <li class="J_tabCloseAll"><a href="/admin/logout.do">安全退出</a></li>
                        </ul>
                    </div>-->
                </div>
                <!-- 选项卡部分结束 -->

                <div class="row J_mainContent" id="content-main">
                    <iframe class="J_iframe" name="iframe0" width="100%" height="100%" th:src="@{/sy}" frameborder="0"
                            data-id="sy" seamless></iframe>
                </div>
                <!-- 修改密码弹出框 -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
                     data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
                                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                            </div>
                            <div class="modal-body" style="padding-top:0px;padding-bottom:0px;">
                                <form class="form-horizontal m-t"   id="passWordFrom" method="post">
                                    <div class="form-group">
                                        <input type="password" class="form-control" required name="oldPassword" id="oldPassword"  placeholder="请输入旧密码">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" required name="newPassword" id="newPassword" placeholder="请输入新密码" />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" required name="newPasswords" id="newPasswords" placeholder="请确认新密码" >
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary block full-width m-b">保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <th:block th:include="include :: footer" />
        <script th:src="@{/assets/js/plugins/md5/md5.js}"></script>
        <script th:inline="javascript">
            /*<![CDATA[*/
            ctxPath = /*[[@{/}]]*/ ''
            /*]]>*/

            $(function () {
                // 用户首次登陆
                if ([[${firstLogin}]]) {
                    $("#myModal").modal();
                }
            });

            let icon = "<i class='fa fa-times-circle'></i> ";
            // 邮政编码验证
            jQuery.validator.addMethod("isComplexity", function (value, element) {
                let regx = /^(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、])(?=.*\d)(?=.*[a-zA-Z]).{8,15}$/;
                return this.optional(element) || (regx.test(value));
            }, icon+"必须包含字母、特殊符号和数字的组合，长度在8-15之间");
            $().ready(function () {
                $("#passWordFrom").validate({
                    rules: {
                        oldPassword: "required",
                        newPassword: {
                            required: true,
                            isComplexity: true
                        },
                        newPasswords: {
                            required: true,
                            equalTo: "#newPassword"
                        }
                    },
                    messages: {
                        oldPassword: {
                            required: icon + "请输入您的旧密码"
                        },
                        newPassword: {
                            required: icon + "请输入您的密码",
                        },
                        newPasswords: {
                            required: icon + "请再次输入密码",
                            equalTo: icon + "两次输入的密码不一致"
                        }
                    }
                })
            });
            $.validator.setDefaults({
                submitHandler: function () {
                    let id = [[${userId}]];
                    let oldPwd = $.md5($("#oldPassword").val())
                    let newPwd = $.md5($("#newPassword").val())
                    let editPwd_url =/*[[@{/sys/user/editPassword}]]*/''
                    $.ajax({
                        type: "post",
                        url: editPwd_url,
                        data: {
                            "oldPwd": oldPwd,
                            "newPwd": newPwd,
                            "id": id
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.success) {
                                $("#myModal").modal('hide')
                                toastr.success(data.message)
                            } else {

                                toastr.error(data.message)
                            }
                        },
                        error: function (data) {
                            toastr.error("系统异常")
                            $("#myModal").modal('hide')
                        }
                    });
                }
            });

            function doLogout(){
                swal({
                    title: "是否确定要退出?",
                    // text: "删除后将无法恢复,请谨慎操作!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "退出",
                    closeOnConfirm: false
                    }, function () {
                        location.href = "logout";
                })

            }

            function openDropDown(that) {
                $('#' + that).attr('class', 'dropdown open')
                $('#' + that + ' a').attr('aria-expanded', 'true')
            }

            function closeDropDown(that) {
                $('#' + that).attr('class', 'dropdown')
                $('#' + that + ' a').attr('aria-expanded', 'false')
            }
        </script>
    </body>
</html>
